import '../style/index.css';

import { useEffect, useRef } from 'react';

import { GetWorkBenhList } from '@/common/types';
import NotData from '@/components/NotData';
import WorkBox from '@/components/work-modal/work-box';
import WorkBase from '@/components/work-modal/WorkBase';
import WorkBasePublic from '@/components/work-modal/WorkBasePublic';
import useWindowWidth from '@/hooks/event/use-window-width';
import { useTiangongRole } from '@/hooks/useTiangongRole';
import { useUserInfo } from '@/store/userStore';

interface WorkbenchAllProps {
  name: string;
  appList: GetWorkBenhList[];
  isNoData?: boolean;
  isLoading?: boolean;
  activeFilter?: string;
  tagChange?: (data: string) => void;
  activePublicTag?: string;
  publicTagChange?: (data: string) => void;
  setActivePublicTag?: (data: string) => void;
  setActiveFilter?: (data: string, tag?: string) => void;
  onScroll?: () => void;
  changeCollect?: (data: GetWorkBenhList) => void;
  flag?: boolean;
  setflag?: (data: boolean) => void;
  height?: number;
  isGetFusion?: boolean;
  onGetFusionCollect?: (data: GetWorkBenhList) => void;
}
interface page {
  list: any[];
  pageNum: number;
  pageSize: number;
  hasMore: boolean;
}

export default function WorkbenchAll({
  name,
  isNoData,
  isLoading,
  appList,
  activeFilter,
  flag,
  isGetFusion = false,
  tagChange,
  activePublicTag,
  publicTagChange,
  setActivePublicTag,
  setActiveFilter,
  onScroll,
  changeCollect,
  setflag = () => {},
  height,
  onGetFusionCollect = () => {},
}: WorkbenchAllProps) {
  const workAllRef = useRef<HTMLDivElement>(null);

  const { role } = useUserInfo();

  // 下拉触底操作
  const Scroll = () => {
    if (workAllRef.current) {
      const height1 = workAllRef.current.clientHeight; // 可以得到我们设置的高度 (不包括滚动的高度)
      const height2 = workAllRef.current.scrollTop; // 当滚动时被卷去的高度
      const height3 = workAllRef.current.scrollHeight; // 全部的高度 包括滚动的高度
      if (height1 + height2 + 20 > height3 && !flag) {
        // 当距离底部20 则会触发
        // 加了flag 是为了防止反复触发
        setflag(true);
        // console.log('触发了');
        // 这里进行请求
        onScroll && onScroll();
        // 成功后关闭
        // setTimeout(() => {
        //   setflag(false)
        // }, 1000)
      }
    }
  };

  const { isPc } = useWindowWidth();
  const { isTiangongManager } = useTiangongRole();

  useEffect(() => {
    console.log('height', height);
  }, [height]);

  return (
    <div>
      {!isTiangongManager && (name === '1' || name === '2') && isPc && (
        <WorkBase
          activeFilter={activeFilter}
          tagChange={tagChange}
          setActiveFilter={setActiveFilter}
          name={name}
        />
      )}
      {name === '3' && isPc && !isTiangongManager && (
        <WorkBasePublic activePublicTag={activePublicTag} publicTagChange={publicTagChange} />
      )}

      {appList.length === 0 && isLoading ? (
        <div className="flex h-[570px] items-center">
          <NotData iconSize={80} textClassName="text-sm" />
        </div>
      ) : (
        <div
          ref={workAllRef}
          onScroll={Scroll}
          className="workbench-all"
          style={{
            overflowY: 'auto',
            maxHeight:
              ((role?.code === 'super_admin' || role?.code === 'admin') && name === '1') ||
              name === '2'
                ? // ? `83vh`
                  // : `88vh`,
                  `calc(83vh - ${height}px)`
                : `calc(88vh - ${height}px)`,
          }}
        >
          {/* 可管理应用 */}
          {(appList.length > 0 || role?.code === 'super_admin' || role?.code === 'admin') && (
            <div>
              {/* <WorkBase
                activeFilter={activeFilter}
                setActiveFilter={setActiveFilter}
                dataList={managerData}
                onFilterChange={(e: Array<GetWorkBenhList>) => {
                  setManageAll(e)
                }}
              /> */}
              {/* <Flex>
                  <div style={{ ...baseStyle }} onClick={() => createApplication()}>
                    <PlusCircleOutlined style={{ fontSize: 30, color: '#474C5F' }} />
                    <div className="word-color  mt-2 text-sm ">创建应用</div>
                  </div> */}
              <WorkBox
                type={
                  name === '1'
                    ? 'manager'
                    : name === '2'
                    ? 'market'
                    : name === '3'
                    ? 'public'
                    : 'fusion'
                }
                dataList={appList}
                isGetFusion={isGetFusion}
                onGetFusionCollect={onGetFusionCollect}
                changeCollect={changeCollect}
              />

              {/* {Array.from({ length: 4 }).map((_, i) => (
                    <div key={i} style={{ ...baseStyle, }} >
                      这是应用{i + 1}
                    </div>
                  ))} 
                </Flex> */}
            </div>
          )}

          {/* 应用市场 */}
          {/* {isPc && getData.length > 0 && (
          <div>
            <div>
              <div className=" word-color  py-2 text-base jr3-step-v2-1">
                推荐应用模板
              </div>
              {
                getData.length > 0 && (
                  <div>
                    <WorkBox type={'market'} dataList={getData} />
                  </div>
                )
              }
            </div>
            {
              (getData.length == 0 && isNoData) && (
                <NotData iconSize={80} textClassName={'text-sm'} />
              )
            }
          </div>
        )} */}

          {/* 公共应用 */}
          {/* <div>
          <div className=" word-color  py-2 text-base jr3-step-v2-1" >
            公共应用
          </div>
          {
            publicData.length > 0 && (
              <div>
                <WorkBox type={'public'} dataList={publicData} />
              </div>
            )
          }
        </div>
        {
          (publicData.length == 0 && isNoData) && (
            <NotData iconSize={80} textClassName={'text-sm'} />
          )
        } */}

          {/* 加载状态提示 */}
          {/* {flag  && (
          <div className='text-center  text-[14px] text  mb-4'>数据加载中...</div>
        )} */}
          {/* 无更多数据提示 */}
          {/* {hasMore && hasMoreData && (
          <div className='text-center  text-[14px] text  mb-4'>没有更多数据了</div>
        )} */}
        </div>
      )}
    </div>
  );
}
